<template>
    <div class="app-container">
        <div class="my_body">
            <div class="left_box">
                <div class="left_box_ex_info">
                    <div class="exam_name" style="margin: 0;padding: 0;">{{ exam.name }}</div>
                    <div class="timer_class">
                        <span v-if="isExam">{{ secondFormat(exDuration) }} / </span>
                        <span>{{ secondFormat(answerTime) }}</span>
                    </div>
                    <el-button class="submit_class" type="primary" @click="submit">交卷</el-button>
                </div>
                <div class="left_box_questions">
                    <div style="margin-bottom: 15px">
                        <el-tag effect="plain">当前</el-tag>
                        <el-tag type="success" style="margin-left: 10px;margin-right: 10px;">已答</el-tag>
                        <el-tag type="info" effect="plain">未答</el-tag>
                    </div>
                    <div style="margin: 0;padding: 0;">
                        <el-descriptions style="margin: 0;padding: 0;" size="mini" :column="7" :colon="false">
                            <el-descriptions-item v-for="(id,index) in questionIds">
                                <el-button :type="answerIsEmpty(answers[id]) ? '' : 'success'" class="question_id_class"
                                           @click="page = index" plain>{{ index + 1 }}
                                </el-button>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <el-divider>{{ page + 1 }} / {{ questionIds.length }}</el-divider>
                </div>
            </div>
            <div class="right_box">
                <div class="right_box_question">
                    <div class="question_label btrlr">
                        <span>问题</span>
                    </div>
                    <div class="question_content">
                        {{ page + 1 }}. {{ question.content }}
                    </div>
                    <div class="question_label">
                        <span>选项({{ question.type == '1' ? '单' : '多' }}选题)</span>
                    </div>
                    <div class="question_option">
                        <el-form label-width="0px" size="mini">
                            <el-form-item style="margin-bottom: 10px;" v-for="option in question.exQuestinOptionList">
                                <template>
                                    <template v-if="question.type=='1'">
                                        <el-radio @change="$forceUpdate()" v-model="answers[question.id]"
                                                  :label="option.id">{{ option.index }}. {{ option.content }}
                                        </el-radio>
                                    </template>
                                    <template v-else>
                                        <el-checkbox-group v-model="answers[question.id]" @change="$forceUpdate()">
                                            <el-checkbox :label="option.id">{{ option.index }}. {{ option.content }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </template>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="right_box_page">
                    <center>
                        <el-button type="primary" icon="el-icon-caret-left" @click="--page" v-if="page>0"
                                   style="margin-right: 10px;font-size: 25px" plain>上一题
                        </el-button>
                        <el-button type="primary" style="font-size: 25px;" @click="++page"
                                   v-if="page<questionIds.length-1"
                                   plain>下一题 <i class="el-icon-caret-right"></i></el-button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getExercise, submitExercise} from "@/api/ex/exercise";
import {getEx_record, submitExRecord} from "@/api/ex/ex_record";
import {getQuestion} from "@/api/ex/question";
import {isEmptyArr} from "@/utils/zzDouUtils/arrayUtil";
import {fillNode, isEmptyStr, isNull} from "@/utils/zzDouUtils/objUtil";
import {secondFormat} from '@/utils/zzDouUtils/dateUtil';

export default {
    name: "Exercise_DO",
    data() {
        return {
            id: null,
            isExam: null,
            exam: {},
            questionIds: [],
            page: 0,//翻页下标
            question: {},
            answerTime: 0,
            exDuration: 0,//考试限制时长
            answers: {},
            isSubmit: false,
            intervalTimer: null,
        };
    },
    created() {
        this.id = this.$route.params.exId;
        this.isExam = this.$route.params.isExam == '1';
        this.getExBean();
        //开始计时
        this.intervalTimer = setInterval(() => {
            ++this.answerTime;
        }, 1000);
    },
    methods: {
        secondFormat,
        /** 判断选项答案是否为空 */
        answerIsEmpty(obj) {
            return isNull(obj) || isEmptyArr(obj);
        },
        /** 查询题库详情 */
        async getExBean() {
            if (this.isExam) {
                await getEx_record(this.id).then(response => {
                    this.exam = response.data.exam;
                    this.exDuration = response.data.exam.duration;
                    this.questionIds = response.data.exam.questionIds;
                })
            } else {
                await getExercise(this.id).then(response => {
                    this.exam = response.data;
                    this.questionIds = response.data.questionIds;
                })
            }
            //初始化答案
            if (!isEmptyArr(this.questionIds)) {
                this.questionIds.forEach(item => {
                    fillNode(this.answers, item, null);
                })
                this.paging();
            }
        },
        /** 翻页 */
        paging() {
            const id = this.questionIds[this.page];
            getQuestion(id).then(response => {
                this.question = response.data;
                if (isEmptyStr(this.answers[id]) || isEmptyArr(this.answers[id])) {
                    //改变答案类型 单选题为null 多选题为数组
                    this.answers[id] = (response.data.type == '1') ? null : [];
                }
            })
        },
        /** 交卷 */
        submit() {
            this.$confirm('提交后无法再修改，是否需要再检查下呢？', '请确认', {
                confirmButtonText: '交卷', cancelButtonText: '我再检查下', type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: '阅卷中，请稍后.....',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.isSubmit = true;
                if (this.isExam) {
                    submitExRecord(this.id, this.answerTime, this.answers).then(response => {
                        this.$modal.msgSuccess('交卷成功');
                        loading.close();
                        //跳转
                        this.$store.dispatch("tagsView/delView", this.$route);//关闭当前页
                        this.$router.push('/ex/check/index.vue/' + this.id + '/' + this.$route.params.isExam)
                    })
                } else {
                    submitExercise(this.id, this.answerTime, this.answers).then(response => {
                        this.$modal.msgSuccess('交卷成功');
                        loading.close();
                        //跳转
                        this.$store.dispatch("tagsView/delView", this.$route);//关闭当前页
                        this.$router.push('/ex/check/index.vue/' + this.id + '/' + this.$route.params.isExam)
                    })
                }
            }).catch(() => {
                this.$notify.success({title: '取消成功', message: "那您好好检查哦！！"});
            });
        }
    },
    watch: {
        page(n, o) {
            if (n < 0) {
                this.page = 0
            } else if (n > this.questionIds.length - 1) {
                this.page = this.questionIds.length - 1;
            }
            this.paging();
        },
        answerTime(n, o) {
            if (isNaN(n) || n <= 0) {
                return;
            }
            if (this.isExam && n >= this.exDuration && !this.isSubmit) {
                this.isSubmit = true;
                //强制交卷
                const loading = this.$loading({
                    lock: true,
                    text: '考试时间到，阅卷中，请稍后.....',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                submitExRecord(this.id, this.answerTime, this.answers).then(response => {
                    this.$modal.msgSuccess('交卷成功');
                    loading.close();
                    //跳转
                    this.$store.dispatch("tagsView/delView", this.$route);//关闭当前页
                    this.$router.push('/ex/check/index.vue/' + this.id + '/' + this.$route.params.isExam)
                })
            }
        },
        isSubmit(n, o) {
            if (n) {
                clearInterval(this.intervalTimer);
            }
        }
    }
};
</script>
<style>
.my_body {
    width: 100%;
    height: 83vh;
    background: #F4F4F4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 1rem;
    padding-right: 0.5rem;
    overflow: auto;
}

.left_box { /* 左边训练信息和题目个数大盒子 */
    width: 29%;
    height: 100%;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.left_box_ex_info { /* 左边上部分训练信息盒子 */
    width: 100%;
    height: 12rem;
    padding-top: 1rem;
    border-radius: 1rem; /* 圆角 */
    background: #FFFFFF;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.left_box_ex_info .exam_name {
    font-size: 1.25vw;
    font-weight: bold;
}

.left_box_questions { /* 左边下部分题目盒子 */
    width: 100%;
    height: 50vh;
    border-radius: 1rem; /* 圆角 */
    background: #FFFFFF;
    text-align: center;
    padding-top: 7px;
}

.right_box { /* 右边题目信息大盒子 */
    width: 69%;
    margin-left: 20px;
    border-radius: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.right_box_question { /* 右边上部分题目 */
    width: 100%;
    height: 700px;
    background: #FFFFFF;
    border-radius: 1rem;
}

.right_box_page { /* 右边下部分翻页 */
    margin-top: 30px;
    width: 100%;
}

.question_id_class { /* id按钮 */
    width: 56px;
    text-align: center;
}

.timer_class { /* 计时器 */
    padding: 0;
    color: red;
    font-size: 1.2vw;
    font-weight: bold;
}

.submit_class { /* 交卷 */
    font-size: 1vw;
    font-family: 仿宋;
    font-weight: bold;
    width: 4vw;
    height: 3vh;
}

.question_label { /* 作答区 标题 */
    margin: 0 auto;
    width: 100%;
    line-height: 50px;
    height: 50px;
    font-size: 17px;
    font-weight: bold;
    background: #ECF4FF;
    padding-left: 10px;
}

.btrlr {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.question_content { /* 作答区 内容 */
    font-size: 27px;
    font-family: 楷体;
    padding: 10px;
    line-height: 55px;
}

.question_option { /* 作答区 选项 */
    padding: 10px;
}

.question_option .el-checkbox__label {
    font-size: 20px;
}

.question_option .el-radio__label {
    font-size: 20px;
}
</style>
